<template>
  <SellCard>
    <!-- 标题  -->
    <div class="header" slot="headerbox">
      <HomeCard
        v-for="v in HomeData"
        :key="v.id"
        :title="v.title"
        :iconColor="v.iconColor"
        :icon="v.icon"
        :price="v.price"
      ></HomeCard>
    </div>

    <!-- 主要内容 -->
    <div class="main" ref="echartbox"></div>
  </SellCard>
</template>

<script>
import SellCard from "@/components/SellCard.vue";
import HomeCard from "@/components/HomeCard.vue";

//接口
import { reqTotalData } from "@/api/home";

//引入echarts报表
import * as echarts from "echarts";

export default {
  components: {
    SellCard,
    HomeCard,
  },
  data() {
    return {
      HomeData: [
        {
          id: 1,
          title: "总订单",
          price: 102400,
          icon: "icon-order1",
          iconColor: "#1296db",
        },
        {
          id: 2,
          title: "总销售额",
          price: 102400,
          icon: "icon-money",
          iconColor: "#d4237a",
        },
        {
          id: 3,
          title: "今日订单数",
          price: 102400,
          icon: "icon-order2",
          iconColor: "#1296db",
        },
        {
          id: 4,
          title: "今日销售额",
          price: 102400,
          icon: "icon-pay",
          iconColor: "#1afa29",
        },
      ],
    };
  },

  mounted() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(this.$refs["echartbox"]);
    //配置项
    let option = {
      title: {
        text: "数据统计",
      },
      tooltip: {
        trigger: "axis",
      },
      legend: {
        data: ["销售额", "注册人数", "管理员人数", "订单"],
      },
      grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true,
      },
      toolbox: {
        feature: {
          saveAsImage: {},
        },
      },
      xAxis: {
        type: "category",
        boundaryGap: false,
        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          name: "销售额",
          type: "line",
          stack: "Total",
          data: [120, 132, 101, 134, 90, 230, 210],
        },
        {
          name: "注册人数",
          type: "line",
          stack: "Total",
          data: [220, 182, 191, 234, 290, 330, 310],
        },
        {
          name: "管理员人数",
          type: "line",
          stack: "Total",
          data: [150, 232, 201, 154, 190, 330, 410],
        },
        {
          name: "订单",
          type: "line",
          stack: "Total",
          data: [320, 332, 301, 334, 390, 330, 320],
        },
      ],
    };
    // 绘制图表
    myChart.setOption(option);
    //监听事件
    window.addEventListener("resize", () => {
      myChart.resize();
    });
  },

 
};
</script>

<style lang="less" scoped>
.header {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

/deep/.main {
  background-color: #fff;
  height: 700px;
  margin-top: 50px;
}
</style>